<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
        <title>檢視病人</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>

		<!-- bootstrap -->
		<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
		<!-- DataTables -->
		<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
		<!-- bootstrap - 下拉组件 -->
		<!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css" rel="stylesheet" type="text/css" /> -->
		<link href="js/bootstrap-select/bootstrap-select.css" rel="stylesheet" type="text/css" />
	
		<link href="css/style.css" rel="stylesheet" type="text/css">

    </head>


    <body>

        <!-- Loader -->
        <div id="preloader" style="display: none;"><div id="status"><div class="spinner"></div></div></div>

        <!-- Navigation Bar-->
        <header id="topnav">
            <div class="topbar-main">
                <div class="container-fluid">
                    <!-- Logo container-->
                    <div class="logo">
                        <!-- Image Logo -->
                        <a href="index.html" class="logo">
							<img src="images/profile.png" alt="" width="50px" height="50px" />
                        </a>
						<span style="font-size: 18px;color: white;margin-left: 4px;">
							工聯會醫療服務中心
						</span>
                    </div>
                    <!-- End Logo container-->
					
                    <div class="menu-extras topbar-custom">
                        <ul class="list-inline float-right mb-0">
                            <!-- User-->
                            <li class="list-inline-item dropdown notification-list">
								<a class="nav-link dropdown-toggle arrow-none waves-effect nav-user" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="true">
									<img src="images/users/user-1.jpg" alt="user" class="rounded-circle">
								</a>
								<div class="dropdown-menu dropdown-menu-right dropdown-menu-animated profile-dropdown" x-placement="bottom-end" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(-116px, 60px, 0px);">
									<a class="dropdown-item" href="#"><i class="mdi mdi-account-circle m-r-5 text-muted"></i>Profile</a>
									<a class="dropdown-item" href="#"><i class="mdi mdi-lock-open-outline m-r-5 text-muted"></i>Lock screen</a>
									<a class="dropdown-item" href="#"><i class="mdi mdi-logout m-r-5 text-muted"></i> Logout</a>
								</div>
							</li>
							 <!-- 退出 -->
							<li class="list-inline-item dropdown notification-list">
								<a class="nav-link dropdown-toggle arrow-none waves-effect" href="javascript:void(0)" >
									<i class="mdi mdi-login-variant noti-icon"></i>
								</a>
							</li>
                        </ul>
                    </div>
                    <!-- end menu-extras -->


                </div> <!-- end container -->
            </div>
            <!-- end topbar-main -->

            <!-- MENU Start -->
            <div class="navbar-custom">
                <div class="container-fluid">
                    <div id="navigation">
                        <!-- Navigation Menu-->
                        <ul class="navigation-menu">

                            <li class="has-submenu">
                                <a href="index.html"><i class="fa fa-tachometer"></i>主菜单</a>
                            </li>

                            <li class="has-submenu">
                                <a href="#"><i class="dripicons-briefcase"></i>系统管理</a>
                                <ul class="submenu megamenu">
                                    <li>
                                        <ul>
                                            <li><a href="#">demo</a></li>
                                            <li><a href="#">demo</a></li>
                                            <li><a href="#">demo</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>

                            <li class="has-submenu">
                                <a href="#"><i class="dripicons-broadcast"></i>诊所管理</a>
                                <ul class="submenu">
									<li><a href="#">demo</a></li>
									<li><a href="#">demo</a></li>
									<li><a href="#">demo</a></li>
                                </ul>
                            </li>

                            <li class="has-submenu">
                                <a href="#"><i class="dripicons-view-thumb"></i>病人</a>
								<ul class="submenu">
									<li><a href="#">检视病人列表</a></li>
									<li><a href="#">新增病人</a></li>
								</ul>
                            </li>
							<li class="has-submenu">
                                <a href="#"><i class="dripicons-view-thumb"></i>预约</a>
                            </li>
							<li class="has-submenu">
                               <a href="#"><i class="dripicons-view-thumb"></i>候诊</a>
							</li>
                        </ul>
                        <!-- End navigation menu -->
                    </div> <!-- end #navigation -->
                </div> <!-- end container -->
            </div> <!-- end navbar-custom -->
        </header>
        <!-- End Navigation Bar-->
		
		 <div class="wrapper">
			<div class="container-fluid">

				<!-- Page-Title -->
				<div class="row">
					<div class="col-sm-12">
						<div class="page-title-box">
							<div class="btn-group float-right">
								<ol class="breadcrumb hide-phone p-0 m-0">
									<li class="breadcrumb-item"><a href="#">病人</a></li>
									<li class="breadcrumb-item active">检视病人</li>
								</ol>
							</div>
							<h4 class="page-title">检视病人</h4>
						</div>
					</div>
				</div>
				<!-- end page title end breadcrumb -->
				
				<div class="row">
					<div class="col-12">
						<div class="card">
							
							<div class="card-body">
								<div class="dataTables_wrapper container-fluid dt-bootstrap4 no-footer">
									<div class=" row">
										<div class="col-sm-1">
											<select class="selectpicker w-100" data-live-search="true" >
												<option>HKID</option>
												<option>姓名</option>
												<option>中央编号</option>
												<option>出生日期</option>
												<option>排版号码</option>
											</select>
										</div>
										<div class="col-sm-2">
											<input class="form-control" type="text" value="" id="example-text-input" />	
										</div>
										<div class="col-sm-2">
											<button type="submit" class="btn btn-primary btn-xs m-r-10">搜索</button>
										</div>
										<div class="col-sm-7 text-right">
											<button type="submit" class="btn btn-primary btn-xs m-r-10">全部显示</button>
											<!-- <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal">新增</button> -->
											<button type="button" class="btn btn-primary btn-xs" onclick="location.href='new.html'">新增</button>
										</div>
									</div>
								</div>
								<table id="datatable" class="table table-hover table-bordered table-striped dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
									<thead>
										<tr>
											<th>病人編號</th>
											<th>英文名字</th>
											<th>中文名字</th>
											<th>性別</th>
											<th>出身日期</th>
											<th>移動電話</th>
											<th>其它電話</th>
											<th>電郵</th>
											<th>收費類別</th>
											<th></th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td  onclick="jumpToEditPage(95)">PN00001</td>
											<td> tt dd</td>
											<td> 天天天天</td>
											<td>女</td>
											<td>07/08/2020</td>
											<td>1232</td>
											<td>54543434</td>
											<td>12345678@qq.com</td>
											<td>工聯咭</td>
											<td>
												<i class="appointmentIcon" onclick="jumpToNewReservation(95)" data-imgname="search_patient_ico_appointment"></i>
												<i class="patientArrivesIcon" onclick="jumpToG6(95)" data-imgname="search_patient_ico_addwq"></i>
											</td>
										</tr>
										<tr>
											<td  onclick="jumpToEditPage(96)">PN00002</td>
											<td> test test</td>
											<td> 特他</td>
											<td>女</td>
											<td>05/12/1993</td>
											<td>12323</td>
											<td>11</td>
											<td>dsf231ds@qq.comq</td>
											<td></td>
											<td>
												<i class="appointmentIcon" onclick="jumpToNewReservation(96)" data-imgname="search_patient_ico_appointment"></i>
												<i class="patientArrivesIcon" onclick="jumpToG6(96)" data-imgname="search_patient_ico_addwq"></i>
											</td>
										</tr>
										<tr>
											<td>PN00003</td>
											<td> TETS tet</td>
											<td> 張山</td>
											<td>男</td>
											<td>08/06/2020</td>
											<td>1578445</td>
											<td>2352543</td>
											<td></td>
											<td>優惠卡</td>
											<td>
												<i class="appointmentIcon" onclick="jumpToNewReservation(97)" data-imgname="search_patient_ico_appointment"></i>
												<i class="patientArrivesIcon" onclick="jumpToG6(97)" data-imgname="search_patient_ico_addwq"></i>
											</td>
										</tr>
										<tr>
											<td  onclick="jumpToEditPage(100)">PN00005</td>
											<td> jas ds</td>
											<td> 程潔</td>
											<td>女</td>
											<td>06/05/1993</td>
											<td>3434</td>
											<td>2434</td>
											<td>2323434</td>
											<td></td>
											<td>
												<i class="appointmentIcon" onclick="jumpToNewReservation(100)" data-imgname="search_patient_ico_appointment"></i>
												<i class="patientArrivesIcon" onclick="jumpToG6(100)" data-imgname="search_patient_ico_addwq"></i>
											</td>
										</tr>
										<tr>
											<td  onclick="jumpToEditPage(101)">PN00006</td>
											<td> jas ds</td>
											<td> 程潔</td>
											<td>女</td>
											<td>06/05/1993</td>
											<td>3434</td>
											<td>2434</td>
											<td>2323434</td>
											<td></td>
											<td>
												<i class="appointmentIcon" onclick="jumpToNewReservation(101)" data-imgname="search_patient_ico_appointment"></i>
												<i class="patientArrivesIcon" onclick="jumpToG6(101)" data-imgname="search_patient_ico_addwq"></i>
											</td>
										</tr>
										<tr>
											<td  onclick="jumpToEditPage(98)">PN00007</td>
											<td> dd gg</td>
											<td> 胡胡</td>
											<td>女</td>
											<td>06/05/1993</td>
											<td>222222</td>
											<td></td>
											<td>2323434</td>
											<td></td>
											<td>
												<i class="appointmentIcon" onclick="jumpToNewReservation(98)" data-imgname="search_patient_ico_appointment"></i>
												<i class="patientArrivesIcon" onclick="jumpToG6(98)" data-imgname="search_patient_ico_addwq"></i>
											</td>
										</tr>
										<tr>
											<td  onclick="jumpToEditPage(102)">PN00008</td>
											<td> test test</td>
											<td> 中文</td>
											
											
											<td>不知道</td>
											<td>30/07/2020</td>
											<td>111</td>
											<td>1</td>
											<td>22@qq.com</td>
											<td></td>
											<td>
												<i class="appointmentIcon" onclick="jumpToNewReservation(102)" data-imgname="search_patient_ico_appointment"></i>
												<i class="patientArrivesIcon" onclick="jumpToG6(102)" data-imgname="search_patient_ico_addwq"></i>
											</td>
										</tr>
										<tr>
											<td  onclick="jumpToEditPage(103)">PN00009</td>
											<td> ter trt</td>
											<td> </td>
											
											
											<td>不知道</td>
											<td>30/07/2020</td>
											<td></td>
											<td></td>
											<td></td>
											<td></td>
											<td>
												<i class="appointmentIcon" onclick="jumpToNewReservation(103)" data-imgname="search_patient_ico_appointment"></i>
												<i class="patientArrivesIcon" onclick="jumpToG6(103)" data-imgname="search_patient_ico_addwq"></i>
											</td>
										</tr>
										<tr>
											<td  onclick="jumpToEditPage(104)">PN00010</td>
											<td> wr re</td>
											<td> </td>
											
											
											<td>不知道</td>
											<td>30/07/2020</td>
											<td></td>
											<td></td>
											<td></td>
											<td></td>
											<td>
												<i class="appointmentIcon" onclick="jumpToNewReservation(104)" data-imgname="search_patient_ico_appointment"></i>
												<i class="patientArrivesIcon" onclick="jumpToG6(104)" data-imgname="search_patient_ico_addwq"></i>
											</td>
										</tr>
										<tr>
											<td  onclick="jumpToEditPage(105)">PN00011</td>
											<td> rer re</td>
											<td> </td>
											
											
											<td>不知道</td>
											<td>30/07/2020</td>
											<td></td>
											<td></td>
											<td></td>
											<td></td>
											<td>
												<i class="appointmentIcon" onclick="jumpToNewReservation(105)" data-imgname="search_patient_ico_appointment"></i>
												<i class="patientArrivesIcon" onclick="jumpToG6(105)" data-imgname="search_patient_ico_addwq"></i>
											</td>
										</tr>
										<tr>
											<td  onclick="jumpToEditPage(106)">PN00012</td>
											<td> ete tet</td>
											<td> </td>
											
											
											<td>不知道</td>
											<td>05/08/2020</td>
											<td></td>
											<td></td>
											<td></td>
											<td></td>
											<td>
												<i class="appointmentIcon" onclick="jumpToNewReservation(106)" data-imgname="search_patient_ico_appointment"></i>
												<i class="patientArrivesIcon" onclick="jumpToG6(106)" data-imgname="search_patient_ico_addwq"></i>
											</td>
										</tr>
										<tr>
											<td  onclick="jumpToEditPage(107)">PN00013</td>
											<td> s tet</td>
											<td> </td>
											
											
											<td>不知道</td>
											<td>05/08/2020</td>
											<td></td>
											<td></td>
											<td></td>
											<td></td>
											<td>
												<i class="appointmentIcon" onclick="jumpToNewReservation(107)" data-imgname="search_patient_ico_appointment"></i>
												<i class="patientArrivesIcon" onclick="jumpToG6(107)" data-imgname="search_patient_ico_addwq"></i>
											</td>
										</tr>
										<tr>
											<td  onclick="jumpToEditPage(108)">PN00014</td>
											<td> tewt tete</td>
											<td> </td>
											<td>男</td>
											
											
											<td>12/08/2020</td>
											<td></td>
											<td></td>
											<td></td>
											<td>工聯咭</td>
											<td>
												<i class="appointmentIcon" onclick="jumpToNewReservation(108)" data-imgname="search_patient_ico_appointment"></i>
												<i class="patientArrivesIcon" onclick="jumpToG6(108)" data-imgname="search_patient_ico_addwq"></i>
											</td>
										</tr>
										<tr>
											<td  onclick="jumpToEditPage(109)">PN00015</td>
											<td> dd ff</td>
											<td> </td>
											
											
											<td>不知道</td>
											<td>18/08/2020</td>
											<td></td>
											<td></td>
											<td></td>
											<td></td>
											<td>
												<i class="appointmentIcon" onclick="jumpToNewReservation(109)" data-imgname="search_patient_ico_appointment"></i>
												<i class="patientArrivesIcon" onclick="jumpToG6(109)" data-imgname="search_patient_ico_addwq"></i>
											</td>
										</tr>
										<tr>
											<td  onclick="jumpToEditPage(110)">PN00016</td>
											<td> forever hu</td>
											<td> </td>
											
											
											<td>不知道</td>
											<td>19/08/2020</td>
											<td></td>
											<td></td>
											<td></td>
											<td></td>
											<td>
												<i class="appointmentIcon" onclick="jumpToNewReservation(110)" data-imgname="search_patient_ico_appointment"></i>
												<i class="patientArrivesIcon" onclick="jumpToG6(110)" data-imgname="search_patient_ico_addwq"></i>
											</td>
										</tr>
										<tr>
											<td  onclick="jumpToEditPage(111)">PN00017</td>
											<td> franky huang</td>
											<td> </td>
											<td>男</td>
											
											
											<td>18/08/2016</td>
											<td></td>
											<td></td>
											<td></td>
											<td></td>
											<td>
												<i class="appointmentIcon" onclick="jumpToNewReservation(111)" data-imgname="search_patient_ico_appointment"></i>
												<i class="patientArrivesIcon" onclick="jumpToG6(111)" data-imgname="search_patient_ico_addwq"></i>
											</td>
										</tr>
										<tr>
											<td  onclick="jumpToEditPage(112)">PN00018</td>
											<td> franky huang</td>
											<td> 黃自由</td>
											
											<td>女</td>
											
											<td>19/08/2015</td>
											<td>1232</td>
											<td></td>
											<td></td>
											<td></td>
											<td>
												<i class="appointmentIcon" onclick="jumpToNewReservation(112)" data-imgname="search_patient_ico_appointment"></i>
												<i class="patientArrivesIcon" onclick="jumpToG6(112)" data-imgname="search_patient_ico_addwq"></i>
											</td>
										</tr>
										<tr>
											<td  onclick="jumpToEditPage(113)">PN00019</td>
											<td>  </td>
											<td> 看見了廣氾的</td>
											
											<td>女</td>
											
											<td>27/08/2015</td>
											<td></td>
											<td></td>
											<td></td>
											<td></td>
											<td>
												<i class="appointmentIcon" onclick="jumpToNewReservation(113)" data-imgname="search_patient_ico_appointment"></i>
												<i class="patientArrivesIcon" onclick="jumpToG6(113)" data-imgname="search_patient_ico_addwq"></i>
											</td>
										</tr>
										<tr>
											<td  onclick="jumpToEditPage(114)">PN00020</td>
											<td>  </td>
											<td> 王宝乐</td>
											<td>不知道</td>
											<td>19/08/1990</td>
											<td></td>
											<td></td>
											<td></td>
											<td></td>
											<td>
												<i class="appointmentIcon" onclick="jumpToNewReservation(114)" data-imgname="search_patient_ico_appointment"></i>
												<i class="patientArrivesIcon" onclick="jumpToG6(114)" data-imgname="search_patient_ico_addwq"></i>
											</td>
										</tr>
										<tr>
											<td  onclick="jumpToEditPage(115)">PN00021</td>
											<td> w w</td>
											<td> </td>
											<td>不知道</td>
											<td>12/08/2020</td>
											<td></td>
											<td></td>
											<td></td>
											<td>
												<select class="form-control " id="testSelect" title="請選擇..." data-live-search="true" >
													<option></option>
													<option>十滴水</option>
													<option>感冒靈</option>
													<option>板藍根</option>
												</select>
											</td>
											<td>
												<i class="appointmentIcon" onclick="jumpToNewReservation(115)" data-imgname="search_patient_ico_appointment"></i>
												<i class="patientArrivesIcon" onclick="jumpToG6(115)" data-imgname="search_patient_ico_addwq"></i>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div> <!-- end col -->
				</div> <!-- end row -->
			</div>	
		</div>
		
		
		<!-- 模态框 -->
		<div class="modal fade in" id="myModal" role="dialog">
			<div class="modal-dialog" style="max-width: 1920px;">
				<div class="modal-content">
		
					<!-- 模态框头部 -->
					<div class="modal-header">
						<h6 class="text-primary">新增</h6>
						<button type="button" class="close" data-dismiss="modal">&times;</button>
					</div>
		
					<!-- 模态框主体 -->
					<div class="modal-body">
						<div class="">
							<div class="form-group row">
								<label for="patientNo" class="col-sm-1 col-form-label">病人编号</label>
								<div class="col-sm-2">
									<input class="form-control" type="text" value="" id="patientNo">
								</div>
								<label for="date" class="col-sm-1 col-form-label">出生日期</label>
								<div class="col-sm-2">
									<div class="input-group datePicker ">
										<input type="text" class="form-control" placeholder="DD/MM/YYYY">
										<span class="input-group-addon ">
										<i class="fa fa-calendar text-primary fa-lg" aria-hidden="true"></i>
										</span>
									</div>
								</div>
								<label for="person" class="col-sm-1 col-form-label">紧急联系人</label>
								<div class="col-sm-2">
									<input class="form-control" type="text" value="" id="person">
								</div>
							</div>
							<div class="form-group row">
								<label for="surname" class="col-sm-1 col-form-label">Surname</label>
								<div class="col-sm-2">
									<input class="form-control" type="text" value="" id="surname">
								</div>
								<label for="sex" class="col-sm-1 col-form-label">性別</label>
								<div class="col-sm-2">
									<input class="form-control" type="text" value="" id="sex">
								</div>
								<label for="" class="col-sm-1 col-form-label">緊急聯係電話</label>
								<div class="col-sm-2">
									<input class="form-control" type="text" value="" id="">
								</div>
							</div>
							<div class="form-group row">
								<label for="" class="col-sm-1 col-form-label">Name</label>
								<div class="col-sm-2">
									<input class="form-control" type="text" value="" id="">
								</div>
								<label for="sex" class="col-sm-1 col-form-label">負責醫生</label>
								<div class="col-sm-2">
									<input class="form-control" type="text" value="" id="">
								</div>
								<label for="" class="col-sm-1 col-form-label">收費類別</label>
								<div class="col-sm-2">
									<input class="form-control" type="text" value="" id="">
								</div>
							</div>
							<div class="form-group row">
								<label for="" class="col-sm-1 col-form-label">中文姓</label>
								<div class="col-sm-2">
									<input class="form-control" type="text" value="" id="">
								</div>
								<label for="sex" class="col-sm-1 col-form-label">最後看診醫生</label>
								<div class="col-sm-2">
									<input class="form-control" type="text" value="" id="">
								</div>
								<label for="" class="col-sm-1 col-form-label">工會</label>
								<div class="col-sm-2">
									<input class="form-control" type="text" value="" id="">
								</div>
							</div>
							<div class="form-group row">
								<label for="" class="col-sm-1 col-form-label">中文名</label>
								<div class="col-sm-2">
									<input class="form-control" type="text" value="" id="">
								</div>
								<label for="sex" class="col-sm-1 col-form-label">手提電話</label>
								<div class="col-sm-2">
									<input class="form-control" type="text" value="" id="">
								</div>
								<label for="" class="col-sm-1 col-form-label">有效日期</label>
								<div class="col-sm-2">
									<input class="form-control" type="text" value="" id="">
								</div>
							</div>
							<div class="form-group row">
								<label for="" class="col-sm-1 col-form-label">證件類別</label>
								<div class="col-sm-2">
									<input class="form-control" type="text" value="" id="">
								</div>
								<label for="sex" class="col-sm-1 col-form-label">其他電話</label>
								<div class="col-sm-2">
									<input class="form-control" type="text" value="" id="">
								</div>
								<label for="" class="col-sm-1 col-form-label">藥物標簽語言</label>
								<div class="col-sm-2">
									<input class="form-control" type="text" value="" id="">
								</div>
							</div>
							<div class="form-group row">
								<label for="" class="col-sm-1 col-form-label">證件號碼</label>
								<div class="col-sm-2">
									<input class="form-control" type="text" value="" id="">
								</div>
								<label for="sex" class="col-sm-1 col-form-label">電郵</label>
								<div class="col-sm-2">
									<input class="form-control" type="text" value="" id="">
								</div>
							</div>
							<div class="form-group row">
								<label for="" class="col-sm-1 col-form-label">通訊地址</label>
								<div class="col-sm-3">
									<div class="row">
										<label for="" class="col-sm-1 col-form-label">室</label>
										<div class="col-sm-3">
											<input class="form-control" type="text" value="" id="" />
										</div>
										<label for="" class="col-sm-1 col-form-label">室</label>
										<div class="col-sm-3">
											<input class="form-control" type="text" value="" id="" />
										</div>
										<label for="" class="col-sm-1 col-form-label">室</label>
										<div class="col-sm-3">
											<input class="form-control" type="text" value="" id="" />
										</div>
									</div>
								</div>
								<label for="sex" class="col-sm-1 col-form-label">屋苑或大廈</label>
								<div class="col-sm-1">
									<input class="form-control" type="text" value="" id="">
								</div>
								<label for="" class="col-sm-0.5 col-form-label">街道</label>
								<div class="col-sm-1">
									<input class="form-control" type="text" value="" id="">
								</div>
								<label for="" class="col-sm-0.5 col-form-label">地區</label>
								<div class="col-sm-1">
									<input class="form-control" type="text" value="" id="">
								</div>
								<label for="" class="col-sm-0.5 col-form-label">區域</label>
								<div class="col-sm-1">
									<input class="form-control" type="text" value="" id="">
								</div>
							</div>
						</div>
					</div>
					
					<div>
						<ul class="nav nav-tabs" role="tablist">
							<li class="nav-item">
								<a class="nav-link active show" data-toggle="tab" href="#home" role="tab" aria-selected="true">排版編號</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-selected="false">醫療背景</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-selected="false">備註</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-selected="false">檢視到訪日誌</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-selected="false">合併病人記錄</a>
							</li>
						</ul>
						
						<div class="tab-content">
							<div class="tab-pane p-3 active show" id="home" role="tabpanel">
								
							</div>
							<div class="tab-pane p-3" id="profile" role="tabpanel">
								
							</div>
							<div class="tab-pane p-3 " id="messages" role="tabpanel">
								<div class="form-group row">
									<label for="" class="col-sm-1 col-form-label">特別指示</label>
									<div class="col-sm-3">
										<textarea required="" class="form-control" rows="5"></textarea>
									</div>
								</div>
								<div class="form-group row">
									<label for="" class="col-sm-1 col-form-label">特別指示</label>
									<div class="col-sm-3">
										<textarea required="" class="form-control" rows="5"></textarea>
									</div>
								</div>
								<div class="form-group row">
									<label for="" class="col-sm-1 col-form-label">是否警示</label>
									<div class="col-sm-3">
										<div class="form-group row">
											<div class="col-sm-2">
												<div class="custom-control custom-radio">
													<input type="radio" class="custom-control-input" id="yes" name="groups"  />
													<label class="custom-control-label" for="yes">是</label>
												</div>
											</div>
											<div class="col-sm-2">
												<div class="custom-control custom-radio">
													<input type="radio" class="custom-control-input" id="no" name="groups" />
													<label class="custom-control-label" for="no">否</label>
												</div>
											</div>
										</div>
										<div class="switch switch-large">
										    <input type="checkbox" name="my-checkbox" checked />
										</div>
									</div>
								</div>
							</div>
							<div class="tab-pane p-3" id="settings" role="tabpanel">
								
							</div>
						</div>
					</div>
		
					<!-- 模态框底部 -->
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
					</div>
		
				</div>
			</div>
		</div>
    

       
		<!-- jQuery  -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		
		<!-- 日期处理库 -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.28.0/moment.min.js"></script>
		<!-- 提示信息库 -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
		
		<!-- bootstrap -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
		<!-- bootstrap - 开关组件 -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/js/bootstrap-switch.min.js"></script>
		<!-- bootstrap - 日期组件 -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
		<!-- bootstrap - 下拉组件 -->
		<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js"></script> -->
		<script src="js/bootstrap-select/bootstrap-select.js"></script>
		
		<!-- Required datatable js -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/dataTables.bootstrap4.min.js"></script>
		
		
		<!-- Datatable init js -->
		<script>
			$("#datatable").DataTable({
				"paging":true,
				// "searching":false,
				"lengthMenu": [ 10, 25, 50, 75, 100 ],
				"lengthChange":true,
				"pageLength": 10,
				// 固定表頭
				"scrollCollapse": true,
				"scrollY": "550px",
				"dom": "<'row'<'col-sm-12'tr>><'row'<'col-sm-4' i><'col-sm-4 text_center m-t-2'l><'col-sm-4'p>>",
				"language": {
					"info": "显示第 _START_ 到第 _END_ 條記錄,總共有 _MAX_ 條記錄",
					"infoEmpty": "显示 0 to 0 of 0 条数",
					"infoFiltered": "(filtered from _MAX_ 總條數)",
					"lengthMenu":  "每頁 _MENU_ 行",
					"loadingRecords": "加載中...",
					"processing": "處理中...",
					"zeroRecords": "找不到匹配的记录",
					"paginate": {
						"first":      "首頁",
						"last":       "尾頁",
						"next":       "下一頁",
						"previous":   "上一頁"
					},
				}
				// buttons: [{extend:'pageLength', className: 'btn-primary btn-xs'}],
			 });
			 
			$("[name='my-checkbox']").bootstrapSwitch({
				onText:"是",
				offText:"否",
				onColor:"success",
				offColor:"secondary",
				size:"small",
				onSwitchChange:function(event,state){
					if(state==true){
						$(this).val("1");
					}else{
						$(this).val("2");
					}
				}
			});
			$("#testSelect").selectpicker({});
			
			$(".datePicker").datetimepicker({
				format: 'YYYY/MM/DD'
				// sideBySide: true
			});
		</script>

    </body>
</html>